<template>
  <view class="detail">
    <!-- 导航栏 -->
    <view class="nav1">
      <view @click="goclassif">
        <image class="image" src="../../static/image/返回.png" mode=""></image>
      </view>
      <!-- 搜索框 -->
      <view class="inp">
        <u-search placeholder="商品搜索" :show-action="false"></u-search>
        <button class="btn">搜索</button>
      </view>
    </view>
    <!-- 满减 -->
    <view class="Full-minus">
      <span>满减优惠</span>
      <p>再买69.2可享用&nbsp;&nbsp;&nbsp;&nbsp;满79减10</p>
    </view>
    <!-- 全部分类 -->
    <view class="All-categories">
      <view class="fenlei">
        <h3>全部分类</h3>
        <image src="../../static/image/jian.png" mode="widthFix"></image>
      </view>
      <view class="fenlei">
        <h3>销量</h3>
        <image src="../../static/image/jian.png" mode="widthFix"></image>
      </view>
      <view class="fenlei">
        <h3>价格</h3>
        <image src="../../static/image/jian.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 今日抢购 -->
    <view class="today">
      <view class="today1">
        <goods :title="require('../../static/image/包子.png')" title1="江苏无锡香菇猪肉包" title2="猪肉肥美 | 鲜甜嫩软 | 多汁美味"
          title3="多汁香嫩" title4="￥8.79" title5="/笼">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/西兰花.png')" title1="浙江临海西兰花" title2="基地直供 | 绿色培植 | 新鲜采摘" title3="绿色新鲜"
          title4="￥4.79" title5="/笼">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/西红柿.png')" title1="云南高山大西红柿" title2="鲜嫩多汁 | 软甜爽口 | 入口美味"
          title3="美味多汁" title4="￥2.44" title5="/斤">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/马铃薯.png')" title1="宁夏西吉县马铃薯" title2="基地直供 | 绿色培枯 | 新鲜采摘"
          title3="绿色新鲜" title4="￥3.12" title5="/斤">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>

    </view>
    
    <!-- 前往购物车 -->
    <view class="shopping-cart" @click="goCart">
    	<button class="btn">前往购物车</button>
    </view>
  </view>
</template>

<script>
  import goods from '../../components/goods.vue'
  export default {
    components: {
      goods
    },
    data() {
      return {

      }
    },
    methods: {
      goclassif() {
        uni.navigateBack()
      },
      goCart(){
        uni.navigateTo({ url: '/pages/reviews/reviews' })
      }
    }
  }
</script>

<style lang="scss">
  .detail {
    width: 100%;
    background-color: #f9f9f9;

    .nav1 {
      background: linear-gradient(to bottom right, #e1f7eb, white);
      width: 100%;
      height: 140px;

      .image {
        margin-left: 20px;
        margin-top: 20px;
        width: 30px;
        height: 30px;
      }

      // 搜索框
      .inp {
        width: 90%;
        margin-top: 130rpx;
        position: absolute;
        left: 40rpx;
        top: 0rpx;

        .btn {
          color: #ffffff;
          font-size: 20rpx;
          width: 100rpx;
          height: 50rpx;
          border-radius: 50rpx;
          background: linear-gradient(to bottom right, green, white);
          position: absolute;
          top: 6rpx;
          right: 2rpx;
        }
      }
    }

    // 满减
    .Full-minus {
      width: 90%;
      height: 70rpx;
      margin: auto;
      margin-top: -10rpx;
      display: flex;
      align-items: center;
      border-radius: 20rpx;
      background-color: white;

      // border: 1px solid black;
      span {
        font-size: 20rpx;
        background-color: pink;
        color: red;
        border-radius: 14rpx;
        height: 40rpx;
        line-height: 40rpx;
        width: 96rpx;
        text-align: center;
        margin-left: 20rpx;
        margin-right: 40rpx;

      }

      p {
        font-size: 30rpx;
      }
    }

    // 分类
    .All-categories {
      width: 90%;
      margin: auto;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      .fenlei {
        display: flex;
        align-items: center;

        h3 {
          font-weight: bold;
          margin-right: 10rpx;
        }

        image {
          width: 18rpx;

        }
      }
    }
  }

  //今日疯抢
  .today {
    margin: auto;
    margin-top: 10rpx;
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  

    .today1 {
      width: 48%;

      .goods {
        margin-top: 10px;
        width: 100%;
      }
    }

  }
  // 前往购物车
  .shopping-cart{
  	width: 90%;
  	margin:auto;
    margin-top: 20rpx;
    .btn{
      text-align: center;
      background-image: linear-gradient(to right, #82DEAA,#49ba7c);
      height:86rpx;
      line-height: 86rpx;
      border-radius: 20rpx;
      color: white;
      letter-spacing: 4rpx;
    }
  	
  
  }	
</style>